<template>
  <div class="app-container">
    <div>
      <FilenameOption v-model="filename" />
      <AutoWidthOption v-model="autoWidth" />
      <BookTypeOption v-model="bookType" />
      <el-button type="primary" @click="hDownload" style="margin:0 0 20px 20px;">{{bookType}}导出</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
    >
      <el-table-column type="index" width="50" />
      <el-table-column prop="codeInvoice" label="发票代码" width="120" />
      <el-table-column prop="numInvoice" label="发票号码" width="180" />
      <el-table-column prop="tpyeInvioce" label="发票类型" width="105">
        <template v-slot="{row}">
          <el-tag 
            :type="row.tpyeInvioce | typeFilter(tagType)"
            :effect="row.tpyeInvioce | effectFilter(tagEffect)"
          >
            {{ transType(row.tpyeInvioce) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="unAmount" label="未税金额" width="110" align="right"/>
      <el-table-column prop="taxAm" label="税额" width="100" align="right"/>
      <el-table-column prop="inAmount" label="含税金额" width="110" align="right"/>
      <el-table-column prop="kpDate" label="开票日期" width="100"/>
      <el-table-column prop="custName" label="购方名称" show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {transType} from '@/utils'
  // options components
  import FilenameOption from './components/FilenameOption'
  import AutoWidthOption from './components/AutoWidthOption'
  import BookTypeOption from './components/BookTypeOption'

export default {
  name: 'ExportTable',
  components: { FilenameOption, AutoWidthOption, BookTypeOption },
  filters: {
    typeFilter(type, tagType) {
      let typeMap = tagType
      return typeMap[type]
    },
    effectFilter(effect, tagEffect) {
      const effectMap = tagEffect
      return effectMap[effect]
    },
  },
  data() {
    return {
      tableData: this.$store.state.invioceLists, 
      tagType: this.$store.state.tagType,
      tagEffect: this.$store.state.tagEffect,
      tpyeInvioceAll: this.$store.state.tpyeInvioceAll, // 发票类型

      filename: '',
      autoWidth: true,
      bookType: 'xlsx'
    }
  },
  created() {},
  methods: {
    // 转换发票类型
    transType(val) {
      return transType(val)
    },
    hDownload() {
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['发票代码', '发票号码', '发票类型', '未税金额', '税额', '含税金额', '开票日期', '购方名称']
        const filterVal = ['codeInvoice', 'numInvoice', 'tpyeInvioce', 'unAmount', 'taxAm', 'inAmount', 'kpDate', 'custName']
        const tableData = this.tableData
        const data = this.formatJson(filterVal, tableData)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'tpyeInvioce') {
          return transType(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

<style>
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}
</style>
